import { useEffect, useState } from 'react'
import { Layout, Menu, Breadcrumb, Message, Dropdown, Avatar, Divider } from '@arco-design/web-react';
import { IconEye, IconOrderedList, IconCommon, IconUser, IconPoweroff } from '@arco-design/web-react/icon';
import Logo from '@/static/logo.svg'
import './index.css'
import { app, auth } from '@/tcb/app';
import { useNavigate } from 'react-router-dom';

function Home() {
  const Sider = Layout.Sider;
  const Header = Layout.Header;
  const Footer = Layout.Footer;
  const Content = Layout.Content;

  const [collapsed, setCollapsed] = useState(false);
  const [avatarUrl, setAvatarUrl] = useState('');
  const navigate = useNavigate();

  const onCollapse = (collapsed: boolean, type: string) => {
    const content = type === 'responsive' ? '触发响应式收缩' : '点击触发收缩';
    Message.info({
      content,
      duration: 2000,
    });
    setCollapsed(collapsed)
  };

  function onMenuItemClick(key) {
    if (key === 'logout') {
      auth.signOut().then(() => {
        navigate('/login', { replace: true });
      })
    } else {
      Message.info(`${key}暂未开放`);
    }
  }

  const droplist = (
    <Menu onClickMenuItem={onMenuItemClick}>
      <Menu.Item key="setting">
        <IconUser className='dropdown-icon' />
        用户中心
      </Menu.Item>

      <Divider style={{ margin: '4px 0' }} />
      <Menu.Item key="logout">
        <IconPoweroff className='dropdown-icon' />
        登出
      </Menu.Item>
    </Menu>
  );

  useEffect(() => {
    app
      .getTempFileURL({
        fileList: [`cloud://acro-eyes-0gen9hr2048bedd9.6163-acro-eyes-0gen9hr2048bedd9-1305059170/avatar/${auth.currentUser.uid}.png`]
      })
      .then((res) => {
        setAvatarUrl(res.fileList.find(field => field.fileID === `cloud://acro-eyes-0gen9hr2048bedd9.6163-acro-eyes-0gen9hr2048bedd9-1305059170/avatar/${auth.currentUser.uid}.png`).tempFileURL);
      });
  });

  return (
    <div className="App">
      <Layout className='layout-main'>
        <Header>
          <div className='logo'>
            <Logo />
            <div className="divider"></div>
            <h1>acro.eyes</h1>
          </div>
          <div className='right'>
            <Dropdown droplist={droplist} position="br">
              <Avatar style={{ cursor: 'pointer' }}>
                <img alt="avatar" src={avatarUrl} />
              </Avatar>
            </Dropdown>
          </div>
        </Header>
        <Layout>
          <Sider
            theme='light'
            breakpoint='lg'
            onCollapse={onCollapse}
            collapsed={collapsed}
            width={220}
            collapsible
          >
            <BaseMenu
              onClickMenuItem={(key: string) =>
                Message.info({ content: `You select ${key}`, showIcon: true })
              }
              style={{ width: '100%' }}
            />
          </Sider>
          <Layout style={{ padding: '0 24px' }}>
            <Layout>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item>
              </Breadcrumb>
              <Content>Content</Content>
              <Footer>Footer</Footer>
            </Layout>
          </Layout>
        </Layout>
      </Layout>
    </div>
  )
}

function BaseMenu(props: any) {
  const MenuItem = Menu.Item;
  const SubMenu = Menu.SubMenu;
  return <Menu
    defaultOpenKeys={['flow', 'model']}
    defaultSelectedKeys={['now_flow']}
    theme='light'
  >
    <SubMenu
      key='flow'
      title={
        <span>
          <IconEye />
          流水线
        </span>
      }
    >
      <MenuItem key='now_flow'>进行中</MenuItem>
      <MenuItem key='flow_list'>列表</MenuItem>
      <MenuItem key='create_flow'>创建</MenuItem>
    </SubMenu>
    <SubMenu
      key='model'
      title={
        <span>
          <IconCommon />
          模型
        </span>
      }
    >
      <MenuItem key='model_list'>库</MenuItem>
      <MenuItem key='upload_list'>上传</MenuItem>
    </SubMenu>
    <MenuItem key='task'>
      <IconOrderedList />
      任务中心
    </MenuItem>
  </Menu>;
}

export default Home
